import React,{
  //useEffect,
  useMemo
} from "react";
//import { useSelector,useDispatch } from "react-redux";
import AddPostForm from "./AddPostForm";
import { Link } from "react-router-dom";
import PostAuthor from '../../components/PostAuthor'
import TimeAgo from '../../components/TimeAgo'
import ReactionButtons from '../../components/ReactionButtons'
// import { 
//   //selectAllPosts,
//   fetchPosts,
//   selectPostIds,
//   selectPostById 
// } from "./postsSlice";
//import classnames from 'classnames'
import Spinner from "../../components/Spinner";

// RTK Query基础
// useGetPostsQuery是Redux Toolkit Query（RTK Query）自动生成的一个自定义Hook，
// 它的作用是：从服务器获取帖子列表数据
import { useGetPostsQuery } from "../api/apiSlice";



// let PostExcerpt = ({ post }) => {
//   // 确保组件只有在props真正更改时才会重新渲染
//   return (
//     <article className="post-excerpt" key={post.id}>
//       <h3>{post.title}</h3>
//       <div>
//         <PostAuthor userId={post.user} />
//         <TimeAgo timestamp={post.date} />
//       </div>
//       <p className="post-content">{post.content.substring(0, 100)}</p>

//       <ReactionButtons post={post} />
//       <Link to={`/posts/${post.id}`} className="button muted-button">
//         View Post
//       </Link>
//     </article>
//   );
// };


// let PostExcerpt = ({ postId }) => {
//   // 确保组件只有在props真正更改时才会重新渲染
//   const post = useSelector((state) => selectPostById(state, postId));
//   return (
//     <article className="post-excerpt" key={post.id}>
//       <h3>{post.title}</h3>
//       <div>
//         <PostAuthor userId={post.user} />
//         <TimeAgo timestamp={post.date} />
//       </div>
//       <p className="post-content">{post.content.substring(0, 100)}</p>

//       <ReactionButtons post={post} />
//       <Link to={`/posts/${post.id}`} className="button muted-button">
//         View Post
//       </Link>
//     </article>
//   );
// };

//PostExcerpt = React.memo(PostExcerpt)

// const PostsList = () => {

//   // const {
//   //   data: posts = [],
//   //   isLoading,
//   //   isFetching,
//   //   isSuccess,
//   //   isError,
//   //   error,
//   // } = useGetPostsQuery()

  
//   //const posts = useSelector((state) => state.posts);
//   const dispatch = useDispatch();
//   //const posts = useSelector(selectAllPosts);
//   const orderedPostIds = useSelector(selectPostIds);
//   //console.log('orderedPostIds',orderedPostIds)
//   //const orderedPosts = posts.slice().sort((a, b) => b.date.localeCompare(a.date));
//   const postStatus = useSelector((state) => state.posts.status);
//   const error = useSelector((state) => state.posts.error);

//   // const renderedPosts = orderedPosts?.map((post) => {
//   //   return (
//   //     <article className="post-excerpt" key={post.id}>
//   //       <h3>{post.title}</h3>
//   //       <p className="post-content">{post.content.substring(0, 100)}</p>
//   //       <Link to={`/posts/${post.id}`} className="button muted-button">
//   //         View Post
//   //       </Link>
//   //       <div>
//   //         <PostAuthor userId={post.userId} />
//   //       </div>
//   //       <TimeAgo timestamp={post.date}/>
//   //       {/* <ReactionButtons post={post}/> */}
//   //     </article>
//   //   );
//   // })

//   useEffect(() => {
//     //console.log('postStatus',postStatus)
//     if (postStatus === "idle") {
//       dispatch(fetchPosts());
//     }
//   }, [postStatus, dispatch]);

//   let content;
//   if(postStatus === 'loading') {
//     content = <Spinner text="Loading..." />;
//   }else if(postStatus === 'succeeded') {
//     //const orderedPosts = posts.slice().sort((a, b) => b.date.localeCompare(a.date));
//     // React的默认行为是当父组件渲染时，React会递归渲染其中的所有组件。
//     // content = orderedPosts.map((post) => (
//     //     <PostExcerpt key={post.id} post={post} />
//     //   ));

//     content = orderedPostIds.map((postId) => (
//       <PostExcerpt key={postId} postId={postId} />
//     ));
//   }else if(postStatus === 'failed') {
//     content = <div>{error}</div>;
//   }

//   return (
//     <section className="posts-list">
//       <h2>Posts</h2>
//       <AddPostForm />
//       {content}
//     </section>
//   );
// };


// RTK Query基础
let PostExcerpt = ({ post }) => {
  // 确保组件只有在props真正更改时才会重新渲染
  return (
    <article className="post-excerpt" key={post.id}>
      <h3>{post.title}</h3>
      <div>
        <PostAuthor userId={post.user} />
        <TimeAgo timestamp={post.date} />
      </div>
      <p className="post-content">{post.content.substring(0, 100)}</p>

      <ReactionButtons post={post} />
      <Link to={`/posts/${post.id}`} className="button muted-button">
        View Post
      </Link>
    </article>
  );
};

const PostsList = () => {
  const {
    data: posts = [],
    isLoading,
    isFetching,
    isSuccess,
    isError,
    error,
    refetch
  } = useGetPostsQuery()

  // useMemo是React提供的一个Hook，用于优化组件性能，避免每次渲染时都进行高销的计算。
  // 它的基本原理是通过缓存计算结果，只有当依赖项发生变化时才重新计算。
  
  const sortedPosts = useMemo(() => {
    const sortedPosts = posts.slice();
    sortedPosts.sort((a, b) => b.date.localeCompare(a.date));
    return sortedPosts;
  }, [posts]);

  
  let content;

  if (isLoading) {
    content = <Spinner text="Loading..." />;
    // highlight-next-line
  } else if (isSuccess) {
    content = sortedPosts.map((post) => <PostExcerpt key={post.id} post={post} />);
    // highlight-next-line
  } else if (isError) {
    content = <div>{error.toString()}</div>;
  }

  return (
    <section className="posts-list">
      <h2>Posts</h2>
      <AddPostForm />
      <button onClick={refetch}>Refetch Posts</button>
      {content}
    </section>
  );
};




export default PostsList;

